{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MUCmarket</title>
    <link rel="stylesheet" href={%static "css/web.css"%}>
    <link rel="stylesheet" href={%static "plugins/iconfont/iconfont.css"%}>
    <script src={%static "plugins/iconfont/iconfont.js"%}></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="menu">
        <div class="logo">
            <a href="/index/"><img src="/static/img/参考magazine-unlock-05-2.3.8792-529240D9E5BFBECB08C7D.jpg"
                    alt="logo"></a>
        </div>
        <ul class="menu-section">
            <li class="combobox" id="campusbox">
                <div class="box-title">
                    <i class="iconfont icon-dizhibu"></i>
                    <span>校区</span>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-3">
                    <li class="category">
                        <a class="link" href="/hcampus/">
                            <i class="iconfonts icon-hd"></i>
                            <span>海淀校区</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="/fcampus/">
                            <i class="iconfonts icon-ft"></i>
                            <spab>丰台校区</spab>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="#">
                            <i class="iconfonts icon-hn"></i>
                            <span>海南校区</span>
                        </a>
                    </li>
                </ul>

            </li>
        </ul>
        <ul class="menu-section grow">
            <li id="sort" class="combobox">
                <div class="box-title">
                    <i class="iconfont icon-hudonggongju"></i>
                    <span>商品分类</span>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-4">
                    <li class="category">
                        <a class="link" href="" target="">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>全部商品</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="" target="">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>最近商品</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="" target="">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>热卖商品</span>
                        </a>
                    </li>
                </ul>

            </li>
            <li class="sepearator"></li>
            <li id="my-profile" class="category">
                <a href="/order/" target="" class="link">
                    <i class="iconfont icon-user"></i>
                    <div class="title-nav">
                        <span>个人订单</span>
                    </div>
                </a>
            </li>
            <li id="message" class="category">
                <a href="" target="" class="link">
                    <i class="iconfont icon-gerenyouxiang_cebianlan_shoujianxiang"></i>
                    <div class="title-nav">
                        <span>我的消息</span>
                    </div>
                </a>
            </li>
            <li id="user" class="combobox">
                <div class="box-title">
                    <img src="/media/{{user.Avatr}}" alt="user" class="user-avatar">
                    <div class="uesr-and-status">
                        <span class="user-name">
                            {{user.Name}}

                        </span>
                        <div class="user-status">
                            <span class="in-school">在校</span>
                        </div>
                    </div>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-5">
                    <li class="combobox-text">
                        <span>选择你的状态</span>
                    </li>
                    <li class="status-switch">
                        <span class="in-school">在校</span>
                        <span class="out-school">离校</span>
                        <span class="busy">勿扰</span>
                    </li>
                    <li class="category">
                        <a href="/personalinfo/" class="link">
                            <i class="iconfont icon-gear-settings"></i>
                            <div class="title-nav">
                                <span>设置</span>
                            </div>
                        </a>
                    </li>
                    <li class="category">
                        <a href="/vlogout/" class="link">
                            <i class="iconfont icon-tuichu"></i>
                            <div class="title-nav">
                                <span>退出</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <!-- 主体 -->
    <section class="load"></section>
    <!-- 搜索框和背景图片 -->
    <div class="header-body">
        <section class="container">
            <div class="row">
                <section class="search-field">
                    <div class="item-seeker">
                        <section class="item-seeker-input">
                            <span class="real_input">
                                <input type="text" placeholder="Search..." class="keyword">
                                <div class="search_helper"></div>
                            </span>
                        </section>
                    </div>
                    <button class="btn btn-search btn-box" type="button" tabindex="0">
                        <i class="iconfont icon-icon_use_search"></i>
                    </button>
                </section>
            </div>
        </section>
    </div>
    <!-- 订单 -->
    <section class="content">
        <section class="content_header">
            <div class="container">
                <div class="order-container most-recent-order">
                    <div class="header-section">
                        <header>
                            <h1>MOST RECENT ORDERS</h1>
                        </header>
                    </div>
                    <div class="statusFilter">
                        <h5 class="status-line">
                            Online Status
                        </h5>
                        <div class="status-button">
                            <div class="button-box">
                                <input type="radio" name="online-status" value="all">
                                <span>All</span>
                            </div>
                            <div class="button-box">
                                <input type="radio" name="online-status" value="On School">
                                <span>On School</span>
                            </div>
                            <div class="button-box">
                                <input type="radio" name="online-status" value="Off School">
                                <span>Off School</span>
                            </div>
                        </div>
                    </div>
                    <div class="price-filter">
                        <div>
                            <h5>Max Price</h5>
                            <input type="number" max="9999" min="1" placeholder="MAX" size="5" value>
                            <h5>¥</h5>
                        </div>
                        <div>
                            <h5>Min Price</h5>
                            <input type="number" max="9999" min="0" placeholder="0" size="5" value>
                            <h5>¥</h5>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="content-body">
            <div class="orders-section container">
                <div class="order-type-box">
                    <div class="order-type">Want to Sell</div>
                    <div class="order-type">Want to Buy</div>
                </div>
                <div class="orders">
                    <div class="listening-sell">
                        {% for i in goods %}
                        {% if i.goodtype == 'sell' and i.goodstatus == 'visible' %}
                       <div class="item">
                            <img src="/media/{{i.image}}">
                            <p class="name">{{i.name}}</p>
                            <p class="spec">{{i.describe}}</p>
                            <p class="price">{{i.price}}</p>
                            <p class="count">x{{i.countnum}}</p>
                            <button class="buttons-chat">
                              <i class="iconfont icon-session_huihua"></i>
                            </button>
                            <button class="buttons-copy" onclick="copyToClipboard('买')">
                              <span>BUY</span>
                            </button>
                            </div>
                            {% endif %}
                        {% endfor %}

                    </div><!--sell-->

                    <div class="listening-buy">
                        {% for i in goods %}
                        {% if i.goodtype == 'buy' and i.goodstatus == 'visible' %}
                       <div class="item">
                            <img src="/media/{{i.image}}">
                            <p class="name">{{i.name}}</p>
                            <p class="spec">{{i.describe}}</p>
                            <p class="price">{{i.price}}</p>
                            <p class="count">x{{i.countnum}}</p>
                            <button class="buttons-chat">
                              <i class="iconfont icon-session_huihua"></i>
                            </button>
                            <button class="buttons-copy" onclick="copyToClipboard('买')">
                              <span>BUY</span>
                            </button>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
    </section>
    <script src={% static "js/web.js"%}></script>
</body>

</html>